<template>
  <div class="index">
    <div class="section">
    	<div class="my-bg">
    		<p>{{companyAbbreviate}}</p>
    		<!--<em class="iconfont">&#xe60b;</em>-->
    		<div class="huiyuan">
	    		<div>
	    			<img :src="BasicMemberAndMemberOperatorData.operatorPortraitUrl" v-if="BasicMemberAndMemberOperatorData.operatorPortraitUrl"/>
            <img style="border: 0.05rem white solid" src="../../assets/images/IM_detail.png" v-else/>
          </div>
	    		<div class="myht">
	    			<p>{{BasicMemberAndMemberOperatorData.memberName}}</p>
	    			<p style="font-size: 13px">{{BasicMemberAndMemberOperatorData.gradeName}}</p>
	    		</div>
	    	</div>
    	</div>
    	<div class="order">
    		<div class="" >
    			<div class="order-left">
    				<div @click="go_order('name2')">
    					<em class="iconfont">&#xe654;</em><i v-if="unpaidNum" class="num">{{unpaidNum}}</i>
    					待付款
    				</div>
    				<div @click="go_order('name3')">
    					<em class="iconfont">&#xe60c;</em><i v-if="waitNum" class="num">{{waitNum}}</i>
    					待收货
    				</div>
    			</div>
					<div class="order-right" @click="go_order('name1')">
						<em class="iconfont">&#xe608;</em> 我的订单
					</div>
				</div>
				<div class="">
					<div class="order-left">
						<div>
							<span>{{BasicMemberAndMemberOperatorData.fundAvailMoney}}</span> 可用余额
						</div>
						<div id="">
							<span>{{BasicMemberAndMemberOperatorData.fundLockMoney}}</span> 冻结资金
						</div>
					</div>
					<div class="order-right" @click="my_bill">
						<em class="iconfont" style="font-size: 28px;">&#xe6a1;</em> 我的账单
					</div>
				</div>
			</div>
      <!--各项附加功能  start-->
      <div class="addFunction">
        <ul class="addFunction-ul">
          <li @click="my_im">
            <em class="iconfont redIcon28">&#xe650;</em>
            <div class="addFunction-li-detail">
               <span>我的客服</span>
               <em class="iconfont">&#xe643;</em>
            </div>
          </li>
          <li @click="delivery_address">
            <em class="iconfont redIcon28">&#xe62a;</em>
            <div class="addFunction-li-detail">
              <span>收货地址</span>
              <em class="iconfont">&#xe643;</em>
            </div>
          </li>
          <li @click="account_manage">
            <em class="iconfont redIcon28">&#xe626;</em>
            <div class="addFunction-li-detail">
              <span>账号管理</span>
              <em class="iconfont">&#xe643;</em>
            </div>
          </li>
          <li @click="my_concern">
            <em class="iconfont redIcon24">&#xe64c;</em>
            <div class="addFunction-li-detail">
              <span>我的关注</span>
              <em class="iconfont">&#xe643;</em>
            </div>
          </li>
          <li @click="my_distributionsSop">
            <em class="iconfont redIcon24">&#xe61e;</em>
            <div class="addFunction-li-detail">
              <span>我的分销</span>
              <em class="iconfont">&#xe643;</em>
            </div>
          </li>
          <li @click="invite_attention">
            <em class="iconfont redIcon24">&#xe62c;</em>
            <div class="addFunction-li-detail">
              <span>邀请关注</span>
              <em class="iconfont">&#xe643;</em>
            </div>
          </li>
          <li @click="about_us">
            <em class="iconfont redIcon24">&#xe620;</em>
            <div class="addFunction-li-detail">
              <span>关于我们</span>
              <em class="iconfont">&#xe643;</em>
            </div>
          </li>
        </ul>
      </div>
      <!--各项附加功能  end-->
		</div>
		<vue-footer></vue-footer>
	</div>

</template>

<script>
	import vueFooter from '../../components/footer/footer'
	import { Toast } from 'mint-ui'; //引入弹框
	//var test = window.location.href;
	export default {
		components: {
			vueFooter
		},
		name: 'index',
		data() {
			return {
				companyAbbreviate: "",
				BasicMemberAndMemberOperatorData: {},
				vue_urlNow: window.location.href,
				vue_header_title:'我的',  //头部title
				weixinMemberCode: "",
				saleOrderQb: { //查询数据的QB对象
					offset: 0, //起始数据
					limit: 4 //一页几条
				},
				unpaidNum: "", //获取待付款数量
				waitNum: "", //获取待收货数量
			}
		},

		methods: {

			//获取待付款数量
			query_wxList(loadTop) {
				this.axios({
					method: "POST",
					url: "/v3/sale/orders/unpaidList",
					data: {
						'offset': this.saleOrderQb.offset,
						'limit': this.saleOrderQb.limit
					}
				}).then((res) => {
					this.unpaidNum = res.data.pageTools.recordCount;
				})
			},

			//获取待收货数量
			query_wxList1(loadTop) {
				this.axios({
					method: "POST",
					url: "/v3/sale/orders/waitingList",
					data: {
						'offset': this.saleOrderQb.offset,
						'limit': this.saleOrderQb.limit
					}
				}).then((res) => {
					this.waitNum = res.data.pageTools.recordCount;
				})
			},

      //跳转我的订单
			go_order(obj) {
				localStorage.setItem("orderName", obj);
				this.$router.push({path:"/orderList"})
			},

      //跳转我的账单
      my_bill(){
        this.$router.push({path:"/upgrade"});
      },

      //我的客服（查询是否开通客服）
      my_im() {
        this.axios({
          method:"GET",
          url:"v3/custom/accounts/00000000",
          data:{},
        }).then((res) =>{
        	var sysNum = res.data.accountKey;
					var zhichiUrl = "https://www.sobot.com/chat/h5/index.html?sysNum="+sysNum;
					/*设置用户信息*/
					if(this.BasicMemberAndMemberOperatorData.memberName == ""||this.BasicMemberAndMemberOperatorData.memberName==undefined){
							zhichiUrl+="&uname=游客";//昵称
					}else{
							zhichiUrl+="&tel="+this.BasicMemberAndMemberOperatorData.operatorPhone;//电话或手机
							zhichiUrl+="&email="+this.BasicMemberAndMemberOperatorData.operatorEmail;//邮箱
							zhichiUrl+="&uname="+this.BasicMemberAndMemberOperatorData.memberName;//昵称
							zhichiUrl+="&face="+this.BasicMemberAndMemberOperatorData.operatorPortraitUrl;//头像URL
							zhichiUrl+="&realname="+this.BasicMemberAndMemberOperatorData.memberName;//真实姓名
							zhichiUrl+="&weibo=";//微博账号
							zhichiUrl+="&weixin=";//微信账号
							zhichiUrl+="&qq="+this.BasicMemberAndMemberOperatorData.operatorQq;//QQ号
							zhichiUrl+="&sex=";//0 女 1 男
							zhichiUrl+="&birthday=";//生日，如“1990-01-01”
							zhichiUrl+="&remark=";//用户的备注信息
					}
					/*设置title信息*/
						zhichiUrl+="&back=2";//设置back=1时，显示title
						zhichiUrl+="&titleFlag=3";//设置页面title的显示内容，有效值1、2、3；1 显示console后台设置的企业名称（默认），2 显示传入的固定文案1-30字符，3显示当前客服昵称（机器人昵称、人工客服昵称）
						zhichiUrl+="&customTtile='咨询客服'";//当titleFlag=2时，通过此参数设置固定文案内容，1-30字符
					window.location.href = zhichiUrl;
        }).catch((err) =>{
        	this.axios({
						method: "GET",
						url: "/v3/member/operators?operatorCode=00000000",
					}).then((res) => {
						window.location.href = "tel:"+res.data.operatorPhone;
					}).catch((err) =>{
						Toast({
              message:"卖家未开通客服",
              iconClass: 'fontSize iconfont icon-shibai'
          	});
					});
        });
      },

      //收货地址
      delivery_address() {
        this.$router.push({path:"/deliverys"})
      },

      //账号管理
      account_manage() {
				this.$router.push({path:"/accountSecurity"})
			},

      //我的关注
      my_concern(){
        this.$router.push({path:"/upgrade"});
      },

      //我的分销
      my_distributionsSop(){
        localStorage.setItem("memberCode",localStorage.getItem("memberCode"));
        this.$router.push({path:"/shopMine"})
      },

      //邀请关注
      invite_attention(){
        this.$router.push({path:"/upgrade"});
      },

      //关于我们
      about_us() {
        this.$router.push({path:"/aboutUs"});
      },

			//初始化页面数据
			funds(memberCode) {
				this.axios({
					method: 'GET',
					url: "/v3/basic/members/" + memberCode,
					data: {}
				}).then((res) => {
					this.BasicMemberAndMemberOperatorData = JSON.parse(JSON.stringify(res.data));
					this.BasicMemberAndMemberOperatorData.fundAvailMoney = this.Public.formatMoney(res.data.fundAvailMoney, 2);
					this.BasicMemberAndMemberOperatorData.fundLockMoney = this.Public.formatMoney(res.data.fundLockMoney, 2);
				}).catch((err) => {

				});
			},

			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			},

		},

		activated() {
			document.querySelector('#vue_id_title').innerHTML="我的";
			let vue_urlNow = window.location.href;
			if(vue_urlNow.indexOf("?memberCode=") != -1) {
				var firstQue = vue_urlNow.indexOf("?");
				var memberCode = vue_urlNow.substr(firstQue + 12); //过滤掉?memberCode=
				localStorage.setItem("memberCode", memberCode);
			}
			this.companyAbbreviate = localStorage.getItem("companyAbbreviate");
			if(localStorage.getItem("memberCode") == null) { //判断有没有登录
				this.$router.push({path:"/landing"})
			} else {
				this.funds(localStorage.getItem("memberCode"));
			}
			this.query_wxList1();
			this.query_wxList();
		},

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*附加功能样式  start*/

  .addFunction-li-detail em{
    float: right;
    margin-right: 6px;
  }

  .addFunction-li-detail span{
    float: left;
  }

  .addFunction-li-detail{
    float: left;
    width: 86%;
    border-bottom: 1px #dddddd solid;
    height: 46px;
    line-height: 46px;
  }

  .redIcon28{
    float: left;
    color: red;
    font-size: 28px;
    text-align: center;
    width: 14%;
  }

  .redIcon24{
    float: left;
    color: red;
    font-size: 24px;
    text-align: center;
    width: 14%;
  }

  .addFunction-ul li:last-child .addFunction-li-detail{
    border-bottom: 0px;
  }

  .addFunction-ul li{
     width: 100%;
     height: 46px;
     line-height: 46px;
  }

  .addFunction-ul{
    width: 100%;
    overflow: hidden;
  }

  .addFunction{
    overflow: hidden;
    background: white;
    border-top: 1px #dddddd solid;
    border-bottom: 1px #dddddd solid;
  }
  /*附加功能样式  end*/

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}
.index{
	background: #d2d3d9;
	margin-bottom: 1.6rem;
}
.section{
}
.my-bg{
	background: url('../../assets/img/mybg.jpg') #fff no-repeat;
	background-size: 100%;
	height: 3.8rem;
	position: relative;
}

.num{
  position: absolute;
  top: -3px;
  right: 55px;
  background: white;
  display: block;
  border: 1px #D50B0A solid;
  border-radius: 50%;
  color: #D50B0A;
  font-size: 12px;
  width: 27px;
  height: 27px;
  text-align: center;
  line-height: 27px;
}

.my-bg > p{
	text-align: center;
	color: #fff;
	font-size: 18px;
	padding-top: 0.4rem;
	height: 1rem;
}
.my-bg > em{
	position: absolute;
	color: #fff;
	top: 0.4rem;
	right: 3%;
	font-size: 0.6rem;
}
.huiyuan{
	overflow: hidden;
	margin-top: 0.6rem;
	margin-left: 12%;
}
.huiyuan div{
	float: left;
	color: #fff;

}
.huiyuan div em{
	font-size: 55px;
}

.huiyuan div:last-child{
	margin-left: 7%;
}
.order{
	font-size: 0.3rem;
	background: #fff;
	border-bottom: 1px solid #bbb;
}
.order > div{
	display: -webkit-box;
	box-sizing: border-box;
	padding: 0.5rem 0;
}
.order em{
	font-size: 30px;
	display: block;
}
.order-left{
	-webkit-box-flex: 2;
	display: -webkit-box;
}
.order-left div{
	-webkit-box-flex:1;
  position: relative;
  width: 30%;
  text-align: center;
}
.order-right{
	/*-webkit-box-flex:1;*/
	width: 35%;
	border-left:1px solid #bbb;
	box-sizing: border-box;
	text-align: center;
}
.order > div:first-child{
	border-bottom: 1px solid #bbb;
}
.order-left span{
	display: block;
	margin-top: 0.38rem;
	font-size: 18px;
}
.order-right em{
	color: #D50B0A;
}
.account{
	background: #fff;
	margin-top: 0.1rem;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	padding: 0.45rem 5%;
	font-size: 14px;
	box-sizing: border-box;
  overflow: hidden;
}
.account > div{
	text-align: center;
  width: 25%;
  float: left;
  margin-bottom: 10px;
}
.account em{
	font-size: 0.6rem;
	color: #fff;
  line-height: 1.1rem;
}
.acc-div{
	width: 1rem;
	height: 1rem;
	background: #bbb;
	border-radius:50%;
	line-height: 1rem;
	margin: 0 auto;
	margin-bottom: 0.1rem;
}
.customer{
	margin-top: 0.1rem;
	background: #fff;
	border-top: 1px solid #bbb;
	margin-bottom: 0.2rem;
}
.customer h1{
	width: 85%;
	margin:0 auto ;
	border-bottom: 1px solid #bbb;
	padding: 0.35rem 0;
	font-size: 16px;
}
.customer-div{
	display: -webkit-box;
	padding: 0.5rem 0;
}
.customer-div > div{
	-webkit-box-flex: 1;
	text-align: center;
	font-size: 14px;
}
.customer-div > div div{
	height: 1.2rem;
	width: 1.2rem;
	line-height: 1.2rem;
	border-radius:50% ;
	margin:0 auto;
	margin-bottom: 0.2rem;
}
.customer-div > div em{
	font-size: 25px;
	color: #fff;
}
.cust-call{
	background: #f44c29;
}
.cust-text{
	background: #1cd545;
}

.huiyuan img{
	display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  text-align: center;
}
.myht{
	/*margin-top: 0.15rem;*/
}
.myht p{
	font-size: 16px;
	height: 0.8rem;
	line-height: 0.8rem;
}
.cusTel a:active{
	color:#333;
}
</style>
